
$(function () {
    $('#keyword').on('keyup',function(){
        var keyword=$(this).val();
        $.ajax({
            type      :'GET',
            url       :'ProductAutoComplete?keyword='+keyword,
            dataType  :"json",
            success : function (data){
                console.log(data);
                let productListHTML = '';
                for(let i=0; i<data.length&&keyword!==''; i++){
                    productListHTML+='<li class=\"ProductAutoItem\" data-productId="';
                    productListHTML+=data[i].productId;
                    productListHTML+='">';
                    productListHTML+=data[i].categoryId;
                    productListHTML+=':  ';
                    productListHTML+=data[i].name;
                    productListHTML+='</li>';
                }
                $('#ProductAuto').html(productListHTML);
                $('#ProductAutoComplete').show();
            },
            error  :function (errorMsg) {
                console.log(errorMsg);
            }

        });

        $(document).on('click','.ProductAutoItem',function () {
           var productId=$(this).data('productid');
           console.log(productId);
           window.location.href='viewProduct?productId='+productId;
        });

        $('#ProductAutoComplete').on('mouseleave',function () {
            $(this).hide();
            $('#keyword').val('');
        })
    });
});